<link rel="stylesheet" href="vanui.css">
<div id="root">
    

    <van-nav-bar title="标题" left-text="返回" right-text="按钮" @click-left="onClickLeft" @click-right="onClickRight"></van-nav-bar>

    <br/>

    <van-button type="green" text="主要按钮" @buttonclick="clickFn1"></van-button>
    <van-button type="blue" text="信息按钮" @buttonclick="clickFn2"></van-button>
    <van-button type="gray" text="默认按钮" @buttonclick="clickFn3"></van-button>
    <van-button type="yellow" text="警告按钮" @buttonclick="clickFn4"></van-button>
    <van-button type="red" text="危险按钮" @buttonclick="clickFn5"></van-button>
    <van-loading :show="true"></van-loading>

    <van-tips title='密码错误' :show="true"></van-tips>

    <br/> <br/>
   

    <van-table :columns="columns1" :data="data1"></van-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="vanui.js"></script>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            columns1: [
                {title: '编号',key: 'id'}, 
                {title: '姓名',key: 'name'}, 
                {title: '年龄',key: 'age'},
                {title: '地址',key: 'adress'}
            ],
            data1: [
                {id:1,name:'gdj',age:23,adress:'nj'},
                {id:2,name:'lxy',age:22,adress:'bb'},
                {id:3,name:'xf',age:23,adress:'nj'}
            ]
        },
        methods: {
            onClickLeft() {
                console.log('返回啦');
            },
            onClickRight() {
                console.log('来搜索啦');
            },
            clickFn1() {
                console.log('主要按钮');
            },
            clickFn2() {
                console.log('信息按钮');
            },
            clickFn3() {
                console.log('默认按钮');
            },
            clickFn4() {
                console.log('警告按钮');
            },
            clickFn5() {
                console.log('危险按钮');
            }
        }
    })
</script>